<!DOCTYPE html>
<html>
<head>
	<title>吸毒人员信息采集系统</title>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link rel="stylesheet" href="./layui/css/layui.css" tppabs="./layui/css/layui.css"  media="all">

	<style>
		body {
			font-family: Arial, sans-serif;
			background-color: #f5f5f5;
			color: #333;
			margin: 0;
			padding: 0;
		}
		h1 {
			text-align: center;
			margin-top: 50px;
		}
		table {
			width: 80%;
			margin: 50px auto;
			border-collapse: collapse;
			background-color: #fff;
			box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
		}
		th, td {
			padding: 10px;
			text-align: left;
			border-bottom: 1px solid #ddd;
		}
		th {
			background-color: #f2f2f2;
		}body{
			font-size: 14px;
			font-family: Arial,Helvetica,sans-serif;
			background-color: #f3f3f3;
		}
		.container{
			margin: 20px auto;
			width: 40%;
			background-color: #fff;
			padding: 20px;
			box-shadow: 0px 0px 10px #888;
		}
		.section{
			margin-bottom: 20px;
		}
		.section-header{
			font-size: 18px;
			font-weight: bold;
			margin-bottom: 10px;
		}
		.section-content{
			margin-left: 20px;
			font-size: 16px;
			line-height: 1.5;
		}
		h1{
			text-align: center;
			font-size: 32px;
			font-weight: bold;
			margin-top: 0;
			margin-bottom: 20px;
			color: #2c3e50;
		}
		h2{
			font-size: 22px;
			font-weight: bold;
			margin-top: 0;
			margin-bottom: 10px;
			color: #2c3e50;
		}
		ul{
			list-style: none;
			padding-left: 0;
		}
		li{
			margin-bottom: 10px;
		}
		.bold{
			font-weight: bold;
		}
		.contact{
			margin-top: 20px;
			padding-top: 20px;
			border-top: 1px solid #ccc;
		}
		.contact ul{
			display: flex;
			flex-wrap: wrap;
			padding-left: 0;
		}
		.contact li{
			flex-basis: 50%;
		}
	</style>
</head>
<body>
 <ul class="layui-nav" lay-filter="" style="position: sticky;top: 0px;z-index:100">
      <li class="layui-nav-item"><a href="/index/1">展示区</a></li>
      <li class="layui-nav-item"><a href="/search_someone">查询区</a></li>
      <li class="layui-nav-item"><a href="/info_insert">采集区</a></li>
      <li class="layui-nav-item"><a href="/info_update">修改区</a></li>
      <li class="layui-nav-item layui-this"><a href="/analyse">分析区</a></li>
      <li class="layui-nav-item">
        <a href="javascript:;">退出系统</a>
        <dl class="layui-nav-child">
          <dd><a href="/exit">确认退出</a></dd>
        </dl>
      </li>
    </ul>
 {% if is_show == 0 %}
 <h1 style="margin-top: 20%;">未查到相关人员信息</h1>
 {% endif %}
 {% if  is_not_data %}
 <h1 style="margin-top: 20%;">还未查询过任何人的信息</h1>
 {% endif %}

 	{% for i in result %}
	<div class="container" style="position: relative" id="{{i[0]|safe}}">
		 <img src="./img/img.png" style="z-index:50;position: absolute;top:12%;right:15%;height: 150px;width: 120px;">
		<h1>信息分析</h1>
		<div class="section">
			<h2 class="section-header">个人信息</h2>
			<div class="section-content">
				<ul>
					<li><span class="bold">姓名：</span>{{i[1]|safe}}</li>
					<li><span class="bold">性别：</span>{% if i[2]-1 == 0 %}
             {{"男"|safe}}
        {% else %}
            {{"女"|safe}}
        {% endif %}</li>
					<li><span class="bold">年龄：</span>{{i[3]|safe}}</li>
					<li><span class="bold">出生日期：</span>{{i[4]|safe}}</li>
					<li><span class="bold">身份证号码：</span>{{i[5]|safe}}</li>
					<li><span class="bold">联系电话：</span>{{i[6]|safe}}</li>
					<li><span class="bold">学历：</span>{{i[7]|safe}}</li>
					<li><span class="bold">工作：</span>{{i[8]|safe}}</li>
					<li><span class="bold">经济情况：</span>{{i[10]|safe}}</li>
					<li><span class="bold">家庭情况：</span>{{i[9]|safe}}</li>
					<li><span class="bold">社交圈：</span><br>{{i[11]|safe}}</li>
				</ul>
			</div>
		</div>
		<button type="button" id="output{{i[0]|safe}}" style="width: 100px;height:40px;text-align:center;margin-left: 40%;margin-top:10px;">导出信息</button>

	</div>
	{% endfor %}
</body>
<script src="./../html2canvas.js"></script>
<script src="./../jquery-3.6.3.js"></script>

<script>
	{% for i in result %}
	$("#output{{i[0]|safe}}").click(() => {
		$("#output{{i[0]|safe}}").css("visibility", "hidden");

		const dom = $("#{{i[0]|safe}}")[0];

		/**
		* 利用画布的可缩放特性实现高清截图
		*/
		const Canvas = document.createElement('canvas'); // 创建一个新的canvas

		const width = dom.offsetWidth; // 要截图区域的宽
		const height = dom.offsetHeight; // 要截图区域的的高
		const scale = window.devicePixelRatio; // 设备的像素比

		// 设置画布
		Canvas.width = width * scale;
		Canvas.height = height * scale;
		Canvas.getContext('2d').scale(scale, scale); // 缩放
		// 画布从(0,0)移动到截取区域的左上角，只有这个这样，画布才能完美覆盖截图区域
		Canvas.getContext('2d').translate(-dom.getBoundingClientRect().left, -dom.getBoundingClientRect().top);

		html2canvas(dom, { // 这里面都是转换的参数
			canvas: Canvas,
			useCORS: true, // 是否允许跨域
			width: width + 'px', // 设置画布的宽高
			hegiht: height + 'px',
		}).then((canvas) => {
			const context = canvas.getContext('2d');
			// 关闭抗锯齿形，使得文字更有线条
			context.mozImageSmoothingEnabled = false;
			context.webkitImageSmoothingEnabled = false;
			context.msImageSmoothingEnabled = false;
			context.imageSmoothingEnabled = false;

			var imgData = canvas.toDataURL("image/png");

			let aLink = document.createElement("a");
			aLink.style.display = "none";
			aLink.href = imgData;
			aLink.download = "{{i[0]|safe}}{{i[1]|safe}}.png";
			document.body.appendChild(aLink);
			aLink.click();
			document.body.removeChild(aLink);
		});
		$("#output{{i[0]|safe}}").css("visibility", "visible");
	});
	{% endfor %}
</script>
<script src="./../layui/layui.js" charset="utf-8"></script>
</html>
